<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
		<script type="text/javascript" src="js/layui/layui.js"></script>
		<link rel="stylesheet" type="text/css" href="js/layui/css/layui.css" />
		</script>
	</head>
	<style type="text/css">
		 *{
	        padding: 0;
	        margin: 0;
	    }
	      .main {
	      	        margin: 0 auto;        
	      	        padding-left: 25px;        
	      	        padding-right: 25px;        
	      	        padding-top: 0px;        
	      	        width: 350px;        
	      	        height: 350px;        
	      	        background: #353f42;        
	      	        /*以下css用于让登录表单垂直居中在界面,可删除*/        
	      	        position: absolute;        
	      	        top: 45%;        
	      	        left: 50%;        
	      	        margin-top: -175px;        
	      	        margin-left: -175px;    
	     }
		input,button{
		    width: 320px;
		    height: 45px;
		    margin: 0px 8px;
		    border-radius: 10px; /*圆角矩形*/
		    text-indent: 10px; /*里面隐形的字体首行缩进*/
		    margin: 10px auto;
		}
		body{
		    margin: 0px;
		    padding: 0px;
		    height: 180px;
		    background: #353f42;
		   /* background-image: url(../img/login.jpg);*/   /*背景图片*/
		    background-size:100% 100%;   /*图片自由伸缩*/
		}
		a{
		    text-decoration:none;   /*去掉下划线*/
		    color: #808080;
		    font-family: '黑体';
		    font-size: 14px; 
		}
		
		.title{
				margin-top: 6px;
				margin-bottom: 16px;
				font-size: 20px;
				color: rgb(51,51,51);
				text-align: center;/*居中*/
			}
		.select1 {
		    background: rgba(0,0,0,0.2);/*背景色和透明度，可以设置为url地址的图片*/
		    width: 298px;/*宽度*/
		    height: 60px;/*高度*/
		    margin-top: 50px;/*上边距*/
			margin-left: 150px;
			font-size: 25px;
			border-radius: 10px;
		    overflow: hidden;
		    position:absolute;
			top:10px;
			left:10px;
			z-index:100;
		}
		.select1 select{
		    background: transparent;/*透明*/
		    border: none;
		    padding-left: 10px;
		    width: 300px;/*比上面设置的略宽*/
		    height: 100%;
		    border-radius: 10px;
		   color: white;
			font-family: "微软雅黑";
		}
	</style>
	<body >
		<div class="select1">
			<select >
				<option onclick="tea()">注册Token</option>
			    <option onclick="stu()">登录</option>
			</select>
		</div>
		<div class="main">
			<form>
				<div class="title" style="color: white;">获取 Token 密钥（有效期为20分钟）</div>
				<input type="text" value="" placeholder="用户名" id="uname"/><br>
				<input type="password" value="" placeholder="密  码" id="pwd" /><br>
				
				<input type="button" value="获取 Token" onclick="getToken()"/><br />
				<div id="tokendiv" style="display: none;">
					<input type="text" style="border-radius: 0px;margin: 0px auto;" placeholder="Token 密 钥" id="Token" readonly="readonly"/><br>
					<input type="button" style="border-radius: 0px;margin: 0px auto;color: cornflowerblue;" value="复制 Token" onclick="copy()"/>
				</div>
			</form>
		</div>
		
		
		
		<script type="text/javascript">
			function getToken(){
				layui.use("layer", function(){
						var token = $("#Token").val();
						var uname = $("#uname").val();
						var pwd = $("#pwd").val();
						
						
						if(uname==""){
							layer.msg("用户名不能为空");
						}else if(pwd==""){
							layer.msg("密码不能为空");
						}else{
							$.ajax({
								//url:"http://stuapi.ysdjypt.com/Home/Index",
								url:"/getToken",
								data:{
									un:uname,
									pwd:pwd,
								},
								dataType:"json",
								type:"post",
								success:function(res){
										layer.msg("请稍后",function(){
											//var tok = res.token;
											$("#Token").val(res.token);
											$("#tokendiv").show();
										});
								}
							})
						}
					})	
			}
				function stu(){
					//alert("登录");
					window.location.href="login.html";
				}
				function tea(){
					//alert("注册");
					window.location.href="getToken.html";
				}
				function copy(){
				var e = document.getElementById("Token");
						e.select();// 选择对象     
						document.execCommand("Copy");// 执行浏览器复制命令     
						layer.msg("复制成功"); 
			}
		</script>
	</body>
</html>
